<template>
  <div class="Fu">
    <h2>这是父组件区域</h2>
    <div>接受传值：{{ ziData }}</div>
  </div>

  <propsCom :list="list" @sendData="getData"></propsCom>
</template>

<script setup>
import { reactive, ref } from 'vue'
import propsCom from '@/components/propsCom.vue'

let list = reactive([
  { id: '01', name: '张三', age: 18 },
  { id: '02', name: '李四', age: 19 },
  { id: '02', name: '王五', age: 20 }
])

let ziData = ref(null)
const getData = (val) => {
  console.log(val)
  ziData.value = val
}
</script>

<style lang="scss" scoped>
.Fu {
  background-color: #346ec5;
  margin: 30px;
  padding: 10px;
}
</style>
